<mat-card
  class="system-card"
  [ixUiSearch]="searchableElements.elements.support"
>
  <mat-toolbar-row class="title-bar">
    <h3>{{ 'Support' | translate }}</h3>

    <button
      *ixRequiresRoles="requiredRoles"
      mat-button
      color="default"
      ixTest="set-license"
      [ixUiSearch]="searchableElements.elements.updateLicense"
      (click)="updateLicense()"
    >
      {{ licenseButtonText | translate }}
    </button>
  </mat-toolbar-row>

  <mat-card-content>
    <div class="container">
      @if (productImageSrc()) {
        <div
          class="product-image"
          [style.background-image]="'url(' + productImageSrc() + ')'"
        ></div>
      } @else {
        <div class="product-image-placeholder">
          <ix-icon name="ix-truenas-logo-mark" [fullSize]="true"></ix-icon>
        </div>
      }

      @if (systemInfo) {
        <div>
          <ix-sys-info
            [hasLicense]="hasLicense"
            [systemInfo]="systemInfo"
            [licenseInfo]="licenseInfo"
          ></ix-sys-info>

          <div class="links-wrapper">
            @for (link of links; track link) {
              <div class="links">
                <div [innerHTML]="link | translate"></div>
              </div>
            }
          </div>
          @if (hasLicense) {
            <div>
              <ix-slide-toggle
                *ixRequiresRoles="requiredRoles"
                color="primary"
                [formControl]="isProductionControl"
                [label]="'This is a production system' | translate"
              ></ix-slide-toggle>
            </div>
          }

          <!-- ACTION BUTTONS -->
          <div class="actions button-group">
            @if (hasLicense) {
              <button
                mat-button
                color="default"
                class="menu-toggle"
                ixTest="get-support"
                [matMenuTriggerFor]="menu"
              >
                <span>{{ 'Get Support' | translate }}</span>
                <ix-icon name="mdi-menu-down" class="menu-caret"></ix-icon>
              </button>
              <mat-menu #menu="matMenu" overlapTrigger="false">
                <button
                  mat-menu-item
                  ixTest="file-ticket"
                  (click)="feedbackDialog()"
                >
                  <span>{{ ticketText | translate }}</span>
                </button>
                <button
                  *ixRequiresRoles="[Role.SupportWrite]"
                  id="proactiveSupport"
                  mat-menu-item
                  ixTest="proactive-support"
                  (click)="openProactive()"
                >
                  <span>{{ proactiveText | translate }}</span>
                </button>
              </mat-menu>
            } @else {
              <button
                mat-button
                color="default"
                ixTest="file-ticket"
                [ixUiSearch]="searchableElements.elements.fileTicket"
                (click)="feedbackDialog()"
              >
                {{ ticketText | translate }}
              </button>
              <ng-container *ixRequiresRoles="[Role.SupportWrite]">
                @if (hasLicense) {
                  <button
                    id="proactive-btn"
                    mat-button
                    color="default"
                    ixTest="proactive-support"
                    (click)="openProactive()"
                  >
                    {{ proactiveText | translate }}
                  </button>
                }
              </ng-container>
            }

            <ix-save-debug-button></ix-save-debug-button>
          </div>
        </div>
      }
    </div>
  </mat-card-content>
</mat-card>
